<html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- jQuery -->
    <script type="text/javascript" src="../../js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="../../js/jquery-3.3.1.js"></script>

    <!-- Bootstrap -->
    <link href="../../bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="../../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

    <style type="text/css">
        th{
            text-align: center;
        }
        td{
            text-align: center;
        }



        .row-margin-top {
            margin-top: 10px;
        }

    </style>

</head>
<body>

<script>

    function ckeckuserName() {
        //    获取值
        var userName = $("#userName_update_input").val();
        //	定义正则
        var reg = /^\w{3,12}$/;
        //	匹配,返回值
        var flag = reg.test(userName)
        if (flag) {
            //    通过校验
            $("#userName_update_input").css("border", "")
        } else {
            $("#userName_update_input").css("border", "1px red solid")
        }
        //	返回值
        return flag;
    }
    function ckeckuserEmail() {
        //    获取值
        var userEmail = $("#userEmail_update_input").val();
        //	定义正则
        var reg = /^\w{6,12}$/;
        //	匹配,返回值
        var flag = reg.test(userEmail)
        if (flag) {
            //    通过校验
            $("#userEmail_update_input").css("border", "")
        } else {
            $("#userEmail_update_input").css("border", "1px red solid")
        }
        //	返回值
        return flag;
    }
    function ckeckuserPsw() {
        //    获取值
        var userPsw = $("#userPassword_update_input").val();
        //	定义正则
        var reg = /^\w{6,12}$/;
        //	匹配,返回值
        var flag = reg.test(userPsw)
        if (flag) {
            //    通过校验
            $("#userPassword_update_input").css("border", "")
        } else {
            $("#userPassword_update_input").css("border", "1px red solid")
        }
        //	返回值
        return flag;
    }


    function find_user(userId){
        $.ajax({
            url:"../../user/findById?userId="+userId,
            type:"post",
            success:function (user) {
                $("body").html('<div class="modal_fade" id="user_update_Modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">\n' +
                    '    <div class="modal-dialog" role="document">\n' +
                    '        <div class="modal-content">\n' +
                    '            <div class="modal-header">\n' +
                    '                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>\n' +
                    '                <h4 class="modal-title" id="ModalLabel">修改用户</h4>\n' +
                    '            </div>\n' +
                    '            <div class="modal-body">\n' +
                    '                <form class="form-horizontal" id="update_user">\n' +
                    '                    <div class="form-group">\n' +
                    '                        <label class="col-sm-2 control-label">用户名</label>\n' +
                    '                        <div class="col-sm-10">\n' +
                    '                            <input type="text" class="form-control" id="userName_update_input" value="'+user.userName+'" placeholder="userName" name="userName">\n' +
                    '                            <span class="help-block"></span>\n' +
                    '                        </div>\n' +
                    '                    </div>\n' +
                    '\n' +
                    '                    <div class="form-group">\n' +
                    '                        <label class="col-sm-2 control-label">邮箱</label>\n' +
                    '                        <div class="col-sm-10">\n' +
                    '                            <input type="text" class="form-control" id="userEmail_update_input" value="'+user.userEmail+'" placeholder="userEmail" name="userEmail">\n' +
                    '                            <span class="help-block"></span>\n' +
                    '                        </div>\n' +
                    '                    </div>\n' +
                    '                    <div class="form-group">\n' +
                    '                        <label class="col-sm-2 control-label">身份</label>\n' +
                    '                        <div class="col-sm-10">\n' +
                    '                            <select class="form-control" name="userStatus"  id="userStatus_update_input" >\n' +
                    '                                <option value="0" >顾客</option>\n' +
                    '                                <option value="1" >员工</option>\n' +
                    '                                <option value="2" >经理</option>\n' +
                    '                                <option value="3" >管理员</option>\n' +
                    '                            </select>\n' +
                    '\n' +
                    '                        </div>\n' +
                    '                    </div>\n' +
                    '                    <div class="modal-footer">\n' +
                    '                        <button type="button" class="btn btn-default" id="close_btn" data-dismiss="modal">关闭</button>\n' +
                    '                        <button type="button" class="btn btn-primary" id="user_update_btn">修改</button>\n' +
                    '                    </div>\n' +
                    '\n' +
                    '                </form>\n' +
                    '            </div>\n' +
                    '\n' +
                    '        </div>\n' +
                    '    </div>\n' +
                    '</div>');
                $("#close_btn").click(function () {
                    location.href = "user.html";
                });
                // $("#userName_update_input").blur(ckeckuserName);
                // $("#userEmail_update_input").blur(ckeckuserEmail);
                // $("#userPassword_update_input").blur(ckeckuserPsw);
            },dataType:"json"
        })
    }


    $(function () {
        $.ajax({
            url:"../../user/findAll",
            type:"post",
            success:function (userAll) {
                var find_user = '<tr>\n' +
                    '                        <th>用户编号</th>\n' +
                    '                        <th>用户名</th>\n' +
                    '                        <th>邮箱</th>\n' +
                    '                        <th>身份</th>\n' +
                    '                        <th>操作</th>\n' +
                    '                    </tr>';
                $.each(userAll,function (ind ,ele) {
                    find_user +=  ' <tr>\n' +
                        '                        <th>'+ele.userId+'</th>\n' +
                        '                        <th>'+ele.userName+'</th>\n' +
                        '                        <th>'+ele.userEmail+'</th>\n' +
                        '                        <th>'+ele.userStatus+'</th>\n' +
                        '                        <th><button id="edit_btn" onclick="find_user(' + ele.userId + ')"><span>编辑</span></button><button id="delete_btn" onclick="deleteUser(' + ele.userId + ')"><span>删除</span></button></th>\n' +
                        '                    </tr>';
                })
                $("#find_user").html(find_user)
            },dataType:"json"

        })

        $("#user_add_modal_btn").click(function(){
            // reset_form("#user_add_Modal form");
            //弹出模态框
            $("#user_add_Modal").modal({
                backdrop:"static"
            });
        });



    })

    $(function () {
        $("#add_user").submit(function () {
            //         if (ckeckuserName()&&ckeckuserEmail()&&ckeckuserPsw()) {
            if (confirm("确认添加？")) {
                $.ajax({
                    url: "../../user/addUser",
                    type: "post",
                    data: $("#add_user").serialize(),
                    success: function (flag) {
                        if(flag){
                            location.href = "user.html";
                        }else {
                            alert("用户已存在");
                        }
                    },
                    dataType: "json"
                })

                //         }
            }
            //  return false
            // $("#userName_update_input").blur(ckeckuserName);
            // $("#userEmail_update_input").blur(ckeckuserEmail);
            // $("#userPassword_update_input").blur(ckeckuserPsw);
        })
    })

    function deleteUser(userId){
        if(confirm("确认删除？")){
            $.ajax({
                url: "../../user/deleteUserById?userId=" + userId,
                type: "post",
                success: function (user){
                    location.href="http://localhost:8080/cinema/pages/manager/user.html"
                },
                dataType:"json"
            })
            location.href = "user.html";
        }
    };

    $(function () {
        $("#update_user").submit(function () {
            // if(ckeckuserName()&&ckeckuserEmail()&&ckeckuserPsw()){
            if (confirm("确认修改？")){
                $.ajax({
                    url:"../../user/updata_user?userId="+user.userId,
                    type:"post",
                    data:$("#update_user").serialize(),
                    success:function () {
                    },dataTupe:"json"
                })
                location.href="http://localhost:8080/cinema/pages/manager/user.html"
            }

            //     }
            return false;

        })
    })

    function searchUserByName() {
        var userName = $("#select_input").val();
        $.ajax({
            url:"../../user/searchUser?userName=" + userName,
            type:"post",
            success:function (user) {
                if(user==null){
                    alert("没有该用户")
                }else {
                    var  user_sel = ' <tr>\n' +
                        '                        <th>用户编号</th>\n' +
                        '                        <th>用户名</th>\n' +
                        '                        <th>邮箱</th>\n' +
                        '                        <th>身份</th>\n' +
                        '                        <th>操作</th>\n' +
                        '                    </tr>';
                    user_sel += ' <tr>\n' +
                        '                        <th>'+ele.userId+'</th>\n' +
                        '                        <th>'+ele.userName+'</th>\n' +
                        '                        <th>'+ele.userEmail+'</th>\n' +
                        '                        <th>'+ele.userStatus+'</th>\n' +
                        '                    </tr>';
                    $("user_sel").html(user_sel);
                }
            },dataType:"json"
        })
    }

</script>
<!--修改用户的模态框-->
<!-- Modal -->
<div class="modal fade" id="user_update_Modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="ModalLabel">修改用户</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" update_user>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">用户名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="userName_update_input" placeholder="userName" name="userName">
                            <span class="help-block"></span>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">邮箱</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="userEmail_update_input" placeholder="userEmail" name="userEmail">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">身份</label>
                        <div class="col-sm-10">
                            <select class="form-control" name="userStatus" id="userStatus_update_input" >
                                <option value="0" >顾客</option>
                                <option value="1" >员工</option>
                                <option value="2" >经理</option>
                                <option value="3" >管理员</option>
                            </select>

                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="submit" class="btn btn-primary" id="user_update_btn">修改</button>
                    </div>

                </form>
            </div>

        </div>
    </div>
</div>



<!--添加用户的模态框-->
<!-- Modal -->
<div class="modal fade" id="user_add_Modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">添加用户</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="add_user">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">用户名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="userName_add_input" placeholder="userName" name="userName">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">密码</label>
                        <div class="col-sm-10">
                            <input type="password" class="form-control" id="userPassword_add_input" placeholder="userPassword" name="userPassword">
                            <span class="help-block"></span>
                        </div>
                    </div>

                    <!--<div class="form-group">-->
                    <!--<label class="col-sm-2 control-label">确认密码</label>-->
                    <!--<div class="col-sm-10">-->
                    <!--<input type="password" class="form-control" id="checkuserPassword" placeholder="userPassword" >-->
                    <!--<span class="help-block"></span>-->
                    <!--</div>-->
                    <!--</div>-->

                    <div class="form-group">
                        <label class="col-sm-2 control-label">邮箱</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="userEmail_add_input" placeholder="userEmail" name="userEmail">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">身份</label>
                        <div class="col-sm-10">
                            <select class="form-control" name="userStatus" id="userStatus_add_input" >
                                <option value="0" >顾客</option>
                                <option value="1" >员工</option>
                                <option value="2" >经理</option>
                                <option value="3" >管理员</option>
                            </select>
                        </div>
                    </div>


                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="submit" class="btn btn-primary" id="user_save_btn">保存</button>
            </div>
        </div>
    </div>
</div>


<!--页面主体-->
<div class="container-fluid">
    <div class="row row-margin-top">
        <div class="col-md-12">
            <div class = "row row-margin-top">
                <div class="col-md-8">
                    <div class="col-md-4">
                        <input type="text" class="form-control" id="select_input" placeholder="请  输  入  用  户  ID" name="userName">
                        <span class="help-block"></span>
                    </div>
                    <div class="col-md-1">
                        <button id="select_button" onclick="searchUserByName()" class="btn btn-success btn-sm"><span class="glyphicon glyphicon-search" aria-hidden="true" ></span>搜索</button>
                    </div>
                </div>
            </div>
            <div class = "row">
                <div class="col-md-3 col-md-offset-5">
                    <h1>用户管理</h1>
                </div>
            </div>
            <div class = "row row-margin-top">
                <div class="col-md-1 col-md-offset-10">
                    <button id="user_add_modal_btn" class="btn btn-primary btn-sm" ><span class="glyphicon glyphicon-user" aria-hidden="true" ></span>新增</button>
                </div>
            </div>

            <div class="row row-margin-top">
                <table id="user_table" class="table table-bordered table-striped">
                    <thead id="find_user">
                    <tr>
                        <th>用户编号</th>
                        <th>用户名</th>
                        <!--                        <th>密码</th>-->
                        <th>邮箱</th>
                        <th>身份</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="row row-margin-top">
        <!-- 分页条信息 -->
        <div id="page_nav" class="col-md-4 col-md-offset-4">
        </div>
    </div>
    <!-- 显示分页信息 -->
    <div class="row row-margin-top">
        <!--分页文字信息  -->
        <div id="page_info" class="col-md-4 col-md-offset-4">
        </div>
    </div>
</div>
</body>
</html>